﻿<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>进销存管理</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/cropbox.js"></script>
    <!-- begin::global styles -->
    <link rel="stylesheet" href="assets/vendors/bundle.css" type="text/css">
    <!-- end::global styles -->

    <!-- begin::datepicker -->
    <link rel="stylesheet" href="assets/vendors/datepicker/daterangepicker.css">
    <!-- begin::datepicker -->

    <!-- begin::vmap -->
    <link rel="stylesheet" href="assets/vendors/vmap/jqvmap.min.css">
    <!-- begin::vmap -->

    <!-- begin::custom styles -->
    <link rel="stylesheet" href="assets/css/app.css" type="text/css">
    <link rel="stylesheet" href="assets/css/custom.css" type="text/css">
    <link rel="stylesheet" href="js/style.css">


    <!-- end::custom styles -->
    <style>
        .container {
            position: relative;
        }

        .action {
            width: 100%;
            height: 30px;
            margin: 30px 0;
        }

        .cropped img {
            height: 300px;
            width: 300px;
            position: absolute;
            top: 60px;
            left: 450px;
            margin-right: 10px;
        }
    </style>


</head>
<script>
    $(function () {
        $.ajax({
            type: "get",
            async: false,
            url: "/managerServlet",
            xhrFields: {withCredentials: true},
            crossDomaina: true,
            dataType: "text",
            success: function (resp) {
                let i = 6;
                console.log(resp)
                let manager = JSON.parse(resp);
                let arr = [manager.mname, manager.mage, manager.mcity, manager.maddress, manager.mphone, manager.memail]
                $("#mname1").html(manager.mname)
                $("#mname2").html(manager.mname)
                $("#mage1").html(manager.mage)
                $("#mcity1").html(manager.mcity)
                $("#maddress1").html(manager.maddress)
                $("#mphone1").html(manager.mphone)
                $("#memail1").html(manager.memail)
                $("#mname").val(manager.mname)
                $("#mage").val(manager.mage)
                $("#mcity").val(manager.mcity)
                $("#maddress").val(manager.maddress)
                $("#mphone").val(manager.mphone)
                $("#memail").val(manager.memail)
                $("#myimg").prop("src","http://localhost:8080/managerfile/"+manager.mimg)
                $("#myimg2").prop("src","http://localhost:8080/managerfile/"+manager.mimg)
                $("#myimg3").prop("src","http://localhost:8080/managerfile/"+manager.mimg)
                for (let str of arr) {
                    if (str == "未填写") {
                        i--
                    }
                }
                let integr1 = i / 6
                let integr2 = integr1.toFixed(2);
                let integr3 = integr2 * 100 + "%"
                $("#Integrity").css("width", integr3)
                $("#Integritynum").html(integr3)
            }
        })
    })
</script>
<body class="icon-side-menu">

<!-- begin::page loader-->
<div class="page-loader">
    <div class="spinner-border"></div>
    <span>Loading ...</span>
</div>
<!-- end::page loader -->

<!-- begin::sidebar -->
<div class="sidebar" style="z-index: 99999;">
    <ul class="nav nav-pills nav-justified m-b-30" id="pills-tab" role="tablist">
        <li class="nav-item">
            <a class="nav-link" id="notifications-tab" data-toggle="pill" href="#notifications" role="tab"
               aria-controls="notifications" aria-selected="false">
                <i class="fa fa-bell"></i>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="settings-tab" data-toggle="pill" href="#settings" role="tab"
               aria-controls="settings" aria-selected="false">
                <i class="ti-settings"></i>
            </a>
        </li>
    </ul>
    <div class="tab-content" id="pills-tabContent">
        <div class="tab-pane" id="notifications" role="tabpanel" aria-labelledby="notifications-tab">
            <div class="tab-pane-body">
                <h5 class="font-weight-bold m-b-20">通知</h5>
                <div>
                    <p class="text-muted">今天</p>
                    <ul class="list-group list-group-flush m-b-10">
                        <li class="list-group-item d-flex p-l-r-0">
                            <div>
                                <figure class="avatar avatar-xs m-r-10">
                                    <span class="avatar-title bg-success rounded-circle">1</span>
                                </figure>
                            </div>
                            <div>
                                <p class="m-b-0">
                                    <span class="badge small badge-danger">New</span>
                                    拜登赢得了选举
                                </p>
                                <ul class="list-inline small">
                                    <li class="list-inline-item text-muted">8分钟以前</li>
                                    <li class="list-inline-item">
                                        <a href="#">标记已读</a>
                                    </li>
                                    <li class="list-inline-item">
                                        <a href="#">查看</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="list-group-item d-flex p-l-r-0">
                            <div>
                                <figure class="avatar avatar-xs m-r-10">
                                        <span class="avatar-title bg-warning rounded-circle">
                                            2
                                        </span>
                                </figure>
                            </div>
                            <div>
                                <p class="m-b-0">彩票中了十块钱</p>
                                <ul class="list-inline small">
                                    <li class="list-inline-item text-muted">50分钟以前</li>
                                    <li class="list-inline-item">
                                        <a href="#">标记已读</a>
                                    </li>
                                    <li class="list-inline-item">
                                        <a href="#">查看</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
                <div>
                    <p class="text-muted">昨天</p>
                    <ul class="list-group list-group-flush m-b-10">
                        <li class="list-group-item d-flex p-l-r-0">
                            <div>
                                <figure class="avatar avatar-xs m-r-10">
                                        <span class="avatar-title bg-warning rounded-circle">
                                            2
                                        </span>
                                </figure>
                            </div>
                            <div>
                                <p class="m-b-0">彩票中了十块钱</p>
                                <ul class="list-inline small">
                                    <li class="list-inline-item text-muted">50分钟以前</li>
                                    <li class="list-inline-item">
                                        <a href="#">标记已读</a>
                                    </li>
                                    <li class="list-inline-item">
                                        <a href="#">查看</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="list-group-item d-flex p-l-r-0">
                            <div>
                                <figure class="avatar avatar-xs m-r-10">
                                        <span class="avatar-title bg-warning rounded-circle">
                                            2
                                        </span>
                                </figure>
                            </div>
                            <div>
                                <p class="m-b-0">彩票中了十块钱</p>
                                <ul class="list-inline small">
                                    <li class="list-inline-item text-muted">50分钟以前</li>
                                    <li class="list-inline-item">
                                        <a href="#">标记已读</a>
                                    </li>
                                    <li class="list-inline-item">
                                        <a href="#">查看</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="list-group-item d-flex p-l-r-0">
                            <div>
                                <figure class="avatar avatar-xs m-r-10">
                                        <span class="avatar-title bg-warning rounded-circle">
                                            2
                                        </span>
                                </figure>
                            </div>
                            <div>
                                <p class="m-b-0">彩票中了十块钱</p>
                                <ul class="list-inline small">
                                    <li class="list-inline-item text-muted">50分钟以前</li>
                                    <li class="list-inline-item">
                                        <a href="#">标记已读</a>
                                    </li>
                                    <li class="list-inline-item">
                                        <a href="#">查看</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="list-group-item d-flex p-l-r-0">
                            <div>
                                <figure class="avatar avatar-xs m-r-10">
                                        <span class="avatar-title bg-warning rounded-circle">
                                            2
                                        </span>
                                </figure>
                            </div>
                            <div>
                                <p class="m-b-0">彩票中了十块钱</p>
                                <ul class="list-inline small">
                                    <li class="list-inline-item text-muted">50分钟以前</li>
                                    <li class="list-inline-item">
                                        <a href="#">标记已读</a>
                                    </li>
                                    <li class="list-inline-item">
                                        <a href="#">查看</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="tab-pane-footer">
                <a href="#" class="btn btn-primary btn-block">标记全部已读</a>
            </div>
        </div>
        <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">
            <div class="tab-pane-body">
                <div class="m-b-30">
                    <h5 class="font-weight-bold m-b-20">设置</h5>
                    <h6 class="font-weight-bold">系统</h6>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between p-l-r-0">
                            <span>自动更新</span>
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="customSwitch1" checked>
                                <label class="custom-control-label" for="customSwitch1"></label>
                            </div>
                        </li>
                        <li class="list-group-item d-flex justify-content-between p-l-r-0">
                            <span>当前统计</span>
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="customSwitch2" checked>
                                <label class="custom-control-label" for="customSwitch2"></label>
                            </div>
                        </li>
                        <li class="list-group-item d-flex justify-content-between p-l-r-0">
                            <span>用户建议</span>
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="customSwitch3" checked>
                                <label class="custom-control-label" for="customSwitch3"></label>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="m-b-30">
                    <h6 class="font-weight-bold">账户</h6>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between p-l-r-0">
                            <span>账户安全保护</span>
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="customSwitch4">
                                <label class="custom-control-label" for="customSwitch4"></label>
                            </div>
                        </li>

                    </ul>
                </div>
                <div class="m-b-30">
                    <h6 class="font-weight-bold">通知</h6>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between p-l-r-0">
                            <span>邮箱通知</span>
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="customSwitch6">
                                <label class="custom-control-label" for="customSwitch6"></label>
                            </div>
                        </li>
                        <li class="list-group-item d-flex justify-content-between p-l-r-0">
                            <span>短信通知</span>
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="customSwitch7">
                                <label class="custom-control-label" for="customSwitch7"></label>
                            </div>
                        </li>
                        <li class="list-group-item d-flex justify-content-between p-l-r-0">
                            <span>电话通知</span>
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="customSwitch8">
                                <label class="custom-control-label" for="customSwitch8"></label>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="tab-pane-footer">
                <a href="#" class="btn btn-primary btn-block">保存设置</a>
            </div>
        </div>
    </div>
</div>
<!-- end::sidebar -->

<!-- begin::side menu -->
<div class="side-menu">
    <div class='side-menu-body'>
        <ul>
            <li class="side-menu-divider">进销存管理</li>

            <li><a href="#"><i class="fa fa-file"></i>&ensp;&ensp; <span>销售</span></a>
                <ul>
                    <li><a href="index.html">报表统计</a>
                    <li><a href="PurchaseForm.html">进货报表</a></li>
                    <li><a href="ShippingForm.html">订单报表</a></li>
                    <li><a href="OrderList.html">订单列表</a></li>
                    <li><a href="OrderAdd.html">订单修改/增加</a></li>
                </ul>
            </li>

            <li><a href="#"><i class="fa fa-info-circle"></i>&ensp;&ensp; <span>认证方式</span></a>
                <ul>
                    <li><a href="login.html">登录&注册</a>
                    <li><a href="lock-user.html">锁屏</a></li>
                    <li><a href="recover-password.html">恢复密码</a></li>
                </ul>
            </li>

            <li class="open"><a href="#"><i class="fa fa-user-o"></i> &ensp;&ensp;<span>个人管理</span></a>
                <ul>
                    <li><a href="#" class="active">个人信息</a>
                    <li><a href="journal.html">日志</a></li>
                </ul>
            </li>

            <li><a href="#"> <i class="fa fa-truck"></i>&ensp;&ensp; <span>货物管理</span></a>
                <ul>
                    <li><a href="GoodsList.html">商品管理</a>
                    <li><a href="GoodAdd.html">商品增加&修改</a></li>
                </ul>
            </li>

            <li><a href="#"><i class="fa fa-users"></i>&ensp;&ensp;<span>人员管理</span></a>
                <ul>
                    <li><a href="UserList.html">人员查询</a>
                    <li><a href="UserAdd.html">增加&修改</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<!-- end::side menu -->

<!-- begin::navbar -->
<nav class="navbar">
    <div class="container-fluid">

        <div class="header-logo">
            <a href="#">
                <img src="assets/media/image/light-logo.png" alt="...">
                <span class="logo-text d-none d-lg-block">进销存系统</span>
            </a>
        </div>

        <div class="header-body">


            <ul class="navbar-nav" style="margin-left: 90%;">
                <li class="nav-item">
                    <!-- 此处在class里面加上nav-link-notify会出现红点 -->
                    <a href="#" class="nav-link  sidebar-open" data-sidebar-target="#notifications">
                        <i class="fa fa-bell"></i>
                    </a>
                </li>
                <li class="nav-item dropdown">
                    <a href="#" data-toggle="dropdown">
                        <figure class="avatar avatar-sm avatar-state-success">
                            <img class="rounded-circle" id="myimg" src="./login/images/4.jpg" alt="...">
                        </figure>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a href="profile.html" class="dropdown-item">个人主页</a>
                        <a href="#" data-sidebar-target="#settings" class="sidebar-open dropdown-item">设置</a>
                        <div class="dropdown-divider"></div>
                        <a href="login.html" class="text-danger dropdown-item">登出</a>
                    </div>
                </li>
                <li class="nav-item d-lg-none d-sm-block">
                    <a href="#" class="nav-link side-menu-open">
                        <i class="ti-menu"></i>
                    </a>
                </li>
            </ul>
        </div>

    </div>
</nav>
<!-- end::navbar -->

<!-- begin::main content -->
<main class="main-content">

    <div class="container">
        <div class="row">
            <div class="col-md">
                <div class="card">
                    <img src="./login/images/4.jpg" id="myimg2" class="card-img-top" alt="...">
                    <div class="card-body text-center m-t-70-minus">
                        <figure class="avatar avatar-xl m-b-20">
                            <img src="./login/images/4.jpg" id="myimg3" class="rounded-circle" alt="...">
                        </figure>
                        <h5 id="mname2"></h5>
                        <p>爱让你坐着，奉献你的快乐.</p>
                        <a href="#" class="btn btn-outline-primary" data-toggle="modal" data-target="#portrait"
                           id="picture">
                            <i class="fa fa-pencil m-r-5"></i> 更改头像
                        </a>
                    </div>
                </div>
                <!-- Large modal -->
                <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
                     aria-labelledby="myLargeModalLabel" id="portrait">
                    <div class="modal-dialog modal-lg" role="document">
                        <form action="headServlet" method="post" enctype="multipart/form-data">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title" id="gridSystemModalLabel2">修改头像</h4>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                                            style="outline: none"><span
                                            aria-hidden="true">&times;</span></button>
                                </div>
                                <div class="container">
                                    <div class="imageBox">
                                        <div class="thumbBox"></div>
                                        <div class="spinner" style="display: none">Loading...</div>
                                    </div>

                                    <div class="cropped">

                                    </div>
                                    <input id="sbimhead" type="image">
                                    <div class="action">
                                        <input type="file" id="file" name="myfile"
                                               style="float:left; width: 250px;height: 36px;margin-top: 5px">
                                        <button type="submit" id="btn3" class="btn btn-primary"
                                                style="float: right;margin-left: 10px">保存
                                        </button>
                                        <button type="button" id="btnCrop" class="btn btn-info" style="float: right">
                                            截取
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <script type="text/javascript">
                            window.onload = function () {
                                var options =
                                    {
                                        imageBox: '.imageBox',
                                        thumbBox: '.thumbBox',
                                        spinner: '.spinner',
                                        imgSrc: 'avatar.png'
                                    }
                                var cropper = new cropbox(options);
                                document.querySelector('#file').addEventListener('change', function () {
                                    var reader = new FileReader();
                                    reader.onload = function (e) {
                                        options.imgSrc = e.target.result;
                                        cropper = new cropbox(options);
                                    }
                                    reader.readAsDataURL(this.files[0]);
                                    this.files = [];
                                })
                                document.querySelector('#btnCrop').addEventListener('click', function () {
                                    var img = cropper.getDataURL();
                                    document.querySelector('.cropped').innerHTML = '<img id="headphoto" src="' + img + '">';
                                })
                            };
                        </script>
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">个人信息完整度</h5>
                        <div class="d-flex align-items-center">
                            <div class="icon-block icon-block-floating icon-block-outline-success m-r-20">
                                <i class="fa fa-pencil"></i>
                            </div>
                            <div class="progress flex-grow-1">
                                <div class="progress-bar bg-success" role="progressbar" id="Integrity"
                                     aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <span class="h6 mb-0 ml-3" id="Integritynum"></span>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title d-flex justify-content-between align-items-center">
                            信息
                            <button type="button" class="btn btn-primary" data-toggle="modal"
                                    data-target="#inxi">编辑
                            </button>
                        </h5>
                        <div class="row mb-2">
                            <div class="col-6 text-muted">姓名:</div>
                            <div class="col-6" id="mname1"></div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-6 text-muted">年龄:</div>
                            <div class="col-6" id="mage1"></div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-6 text-muted">城市:</div>
                            <div class="col-6" id="mcity1"></div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-6 text-muted">地址:</div>
                            <div class="col-6" id="maddress1"></div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-6 text-muted">手机:</div>
                            <div class="col-6" id="mphone1"></div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-6 text-muted">邮箱:</div>
                            <div class="col-6" id="memail1"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" id="inxi">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="gridSystemModalLabel">修改个人信息</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                            style="outline: none"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="managerform">
                        <div class="form-group">
                            <label for="mname" class="col-sm-2 control-label">姓名：</label>
                            <div class="col-sm-12">
                                <input type="text" class="form-control" id="mname" name="mname" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="mage" class="col-sm-2 control-label">年龄：</label>
                            <div class="col-sm-12">
                                <input type="text" class="form-control" id="mage" name="mage" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="mcity" class="col-sm-2 control-label">城市：</label>
                            <div class="col-sm-12">
                                <input type="text" class="form-control" id="mcity" name="mcity" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="maddress" class="col-sm-2 control-label">地址：</label>
                            <div class="col-sm-12">
                                <input type="text" class="form-control" id="maddress" name="maddress" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="mphone" class="col-sm-2 control-label">手机：</label>
                            <div class="col-sm-12">
                                <input type="text" class="form-control" id="mphone" name="mphone" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="memail" class="col-sm-2 control-label">邮箱：</label>
                            <div class="col-sm-12">
                                <input type="email" class="form-control" id="memail" name="memail" readonly="readonly"
                                       placeholder="">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="btn1">修改</button>
                </div>
                <script>
                    $("#btn1").click(function () {
                        $.ajax({
                            type: "post",
                            async: false,
                            url: "/updateManagerInformation",
                            data: $("#managerform").serialize(),
                            dataType: "text",
                            success: function (resp) {
                                $(location).attr("href", "EditProfile.html")
                            }
                        })
                    })
                </script>
            </div>
        </div>
    </div>
</main>
<!-- end::main content -->

<!-- begin::global scripts -->
<script src="assets/vendors/bundle.js"></script>
<!-- end::global scripts -->

<!-- begin::charts -->
<script src="assets/vendors/charts/chartjs/chart.min.js"></script>
<script src="assets/vendors/charts/peity/jquery.peity.min.js"></script>
<script src="assets/js/examples/charts/chartjs.js"></script>
<script src="assets/js/examples/charts/peity.js"></script>
<!-- end::charts -->

<!-- begin::daterangepicker -->
<script src="assets/vendors/datepicker/daterangepicker.js"></script>
<!-- end::daterangepicker -->

<!-- begin::dashboard -->
<script src="assets/js/examples/dashboard.js"></script>
<!-- end::dashboard -->

<!-- begin::vamp -->
<script src="assets/vendors/vmap/jquery.vmap.min.js"></script>
<script src="assets/vendors/vmap/maps/jquery.vmap.usa.js"></script>
<script src="assets/js/examples/vmap.js"></script>
<!-- end::vamp -->

<!-- begin::custom scripts -->
<script src="assets/js/custom.js"></script>
<script src="assets/js/app.js"></script>
<!-- end::custom scripts -->

</body>

</html>